<template>
  <view class="feedback-container">
    <view class="feedback-form">
      <!-- 反馈类型 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-text">反馈类型</text>
          <text class="required-mark">*</text>
        </view>
        <view class="type-grid">
          <view 
            class="type-item"
            :class="{ active: form.type === type.value }"
            v-for="type in feedbackTypes"
            :key="type.value"
            @click="selectType(type.value)"
          >
            <u-icon :name="type.icon" :size="32" :color="form.type === type.value ? '#fff' : '#5daf34'"></u-icon>
            <text class="type-text">{{ type.label }}</text>
          </view>
        </view>
      </view>

      <!-- 反馈标题 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-text">反馈标题</text>
          <text class="required-mark">*</text>
        </view>
        <input 
          class="form-input"
          v-model="form.title"
          placeholder="请简要描述您的问题（不超过50字）"
          maxlength="50"
          placeholder-class="input-placeholder"
        />
      </view>

      <!-- 反馈内容 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-text">详细描述</text>
          <text class="required-mark">*</text>
        </view>
        <textarea 
          class="form-textarea"
          v-model="form.content"
          placeholder="请详细描述您遇到的问题或建议，我们会认真对待每一条反馈"
          maxlength="500"
          placeholder-class="input-placeholder"
        ></textarea>
        <view class="char-count">
          <text>{{ form.content.length }}/500</text>
        </view>
      </view>

      <!-- 上传图片 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-text">上传图片</text>
          <text class="optional-mark">（选填，最多3张）</text>
        </view>
        <view class="image-upload">
          <view 
            class="image-item"
            v-for="(image, index) in form.images"
            :key="index"
          >
            <image :src="image" mode="aspectFill" class="upload-image"></image>
            <view class="delete-btn" @click.stop="deleteImage(index)">
              <u-icon name="close-circle-fill" size="24" color="#ff6b6b"></u-icon>
            </view>
          </view>
          <view 
            class="upload-btn"
            v-if="form.images.length < 3"
            @click="chooseImage"
          >
            <u-icon name="camera-fill" size="40" color="#999"></u-icon>
            <text class="upload-text">上传图片</text>
          </view>
        </view>
      </view>

      <!-- 联系方式 -->
      <view class="form-section">
        <view class="section-title">
          <text class="title-text">联系方式</text>
          <text class="optional-mark">（选填）</text>
        </view>
        <input 
          class="form-input"
          v-model="form.contactInfo"
          placeholder="手机号或邮箱（方便我们联系您）"
          placeholder-class="input-placeholder"
        />
      </view>

      <!-- 提交按钮 -->
      <view class="submit-section">
        <button 
          class="submit-btn"
          :class="{ disabled: !canSubmit, loading: submitting }"
          :disabled="!canSubmit || submitting"
          @click="handleSubmit"
        >
          <text>{{ submitting ? '提交中...' : '提交反馈' }}</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { submitFeedback } from '@/api/feedback'

export default {
  data() {
    return {
      form: {
        type: '',
        title: '',
        content: '',
        images: [],
        contactInfo: '',
        priority: 'MEDIUM'
      },
      feedbackTypes: [
        { label: '功能建议', value: 'SUGGESTION', icon: 'tags-fill' },
        { label: 'Bug反馈', value: 'BUG_REPORT', icon: 'tags' },
        { label: '投诉', value: 'COMPLAINT', icon: 'warning' },
        { label: '其他', value: 'OTHER', icon: 'more-circle' }
      ],
      submitting: false
    }
  },

  computed: {
    canSubmit() {
      return this.form.type && 
             this.form.title.trim() && 
             this.form.content.trim()
    }
  },

  methods: {
    selectType(type) {
      this.form.type = type
    },

    chooseImage() {
      uni.chooseImage({
        count: 3 - this.form.images.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          // TODO: 上传图片到服务器
          this.form.images.push(...res.tempFilePaths)
          console.log('选择图片:', res.tempFilePaths)
        }
      })
    },

    deleteImage(index) {
      this.form.images.splice(index, 1)
    },

    async handleSubmit() {
      if (!this.canSubmit) {
        uni.showToast({
          title: '请完善反馈信息',
          icon: 'none'
        })
        return
      }

      this.submitting = true

      try {
        const data = {
          type: this.form.type,
          title: this.form.title,
          content: this.form.content,
          contactInfo: this.form.contactInfo,
          priority: this.form.priority
        }

        // 如果有图片，转换为字符串
        if (this.form.images.length > 0) {
          data.images = this.form.images
        }

        const res = await submitFeedback(data)

        if (res.code === 200) {
          uni.showToast({
            title: '提交成功',
            icon: 'success',
            duration: 2000
          })

          setTimeout(() => {
            uni.navigateBack()
          }, 2000)
        } else {
          throw new Error(res.message || '提交失败')
        }
      } catch (error) {
        console.error('提交反馈失败:', error)
        uni.showToast({
          title: error.message || '提交失败',
          icon: 'none'
        })
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.feedback-container {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 30rpx;
}

.feedback-form {
  background: white;
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
}

.form-section {
  margin-bottom: 40rpx;

  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .title-text {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }

    .required-mark {
      color: #ff6b6b;
      margin-left: 8rpx;
      font-size: 28rpx;
    }

    .optional-mark {
      color: #999;
      font-size: 24rpx;
      margin-left: 8rpx;
    }
  }
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;

  .type-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30rpx 20rpx;
    background: #f8f8f8;
    border-radius: 16rpx;
    border: 2rpx solid #e8e8e8;
    transition: all 0.3s;

    &.active {
      background: linear-gradient(135deg, #5daf34, #7cb342);
      border-color: #5daf34;
      box-shadow: 0 8rpx 24rpx rgba(93, 175, 52, 0.3);

      .type-text {
        color: white;
      }
    }

    .type-text {
      font-size: 26rpx;
      color: #666;
      margin-top: 12rpx;
      font-weight: 500;
    }
  }
}

.image-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;

  .image-item {
    position: relative;
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    overflow: hidden;

    .upload-image {
      width: 100%;
      height: 100%;
    }

    .delete-btn {
      position: absolute;
      top: 8rpx;
      right: 8rpx;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .upload-btn {
    width: 200rpx;
    height: 200rpx;
    background: #f8f8f8;
    border: 2rpx dashed #ddd;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;

    &:active {
      background: #f0f0f0;
      border-color: #5daf34;
    }

    .upload-text {
      font-size: 24rpx;
      color: #999;
      margin-top: 12rpx;
    }
  }
}

.form-input {
  width: 100%;
  height: 88rpx;
  background: #f8f8f8;
  border-radius: 16rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #333;
  border: 2rpx solid #e8e8e8;
  transition: all 0.3s;

  &:focus {
    background: white;
    border-color: #5daf34;
  }
}

.form-textarea {
  width: 100%;
  min-height: 300rpx;
  background: #f8f8f8;
  border-radius: 16rpx;
  padding: 24rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  border: 2rpx solid #e8e8e8;
  transition: all 0.3s;

  &:focus {
    background: white;
    border-color: #5daf34;
  }
}

.input-placeholder {
  color: #bbb;
}

.char-count {
  text-align: right;
  margin-top: 12rpx;

  text {
    font-size: 24rpx;
    color: #999;
  }
}

.submit-section {
  margin-top: 60rpx;

  .submit-btn {
    width: 100%;
    height: 100rpx;
    background: linear-gradient(135deg, #5daf34, #7cb342);
    border: none;
    border-radius: 50rpx;
    font-size: 34rpx;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 32rpx rgba(93, 175, 52, 0.35);
    transition: all 0.3s;

    &:active:not(.disabled):not(.loading) {
      transform: scale(0.98);
      box-shadow: 0 4rpx 20rpx rgba(93, 175, 52, 0.25);
    }

    &.disabled {
      opacity: 0.5;
      background: #ccc;
    }

    &.loading {
      opacity: 0.7;
    }
  }
}
</style>


